<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="h100p">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" fixed backgroundColor="#FF7C00">
        <block slot="left">
          <uni-icons color="white" class="icon-left" @click="navigateBackPage" type="left" size="23"></uni-icons>
        </block>
        <view class="inputView flca">
          <uni-icons type="search" size="21"></uni-icons>
          <input v-model="keywords" focus confirm-type="search" type="text" class="input" placeholder="请输入搜索内容" @input="changeInput" />
        </view>
      </uni-nav-bar>
    </view>
    <!-- 二级分类搜索功能 -->
    <scroll-view scroll-y :style="globalData.appStyle.contentStyle">
      <view v-for="(category, key) in categoryResultList" :key="key" class="search_result flc" @click="confirm(category)">
        <rich-text :nodes="category.vHtmlText"></rich-text>
        <text class="parent_label">
          <text>{{ category.parentName }}-{{ category.categoryName }}</text>
        </text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
const api = require('@/utils/request.js');
import commonMxins from '@/mixins/common.js';
export default {
  mixins: [commonMxins],
  components: {},
  data() {
    return {
      // 筛选功能，多个类别选择-1  单个类别选择-2
      searchMode: 1,
      keywords: '',
      lastHistoryInfo: [],
      categoryResultList: []
    };
  },
  onload(options) {
    this.searchMode = Number(options?.searchMode ?? 1);
  },
  methods: {
    async changeInput({ detail }) {
      if (detail.value) {
        const res = await api.request({ url: '/category/queryAll', data: { keywords: detail.value }, method: 'GET' });
        const searchRes = [];
        if (res.code === 200 && res.data && res.data.length) {
          res.data.forEach(el => {
            el.children.forEach(element => {
              searchRes.push({
                parentId: el.id,
                parentName: el.categoryName,
                id: element.id,
                categoryName: element.categoryName,
                vHtmlText: `<div style="font-size: 16rem;font-weight: 700;line-height: 23rem;height: 23rem;text-align: left;color: rgba(56, 56, 56, 1);">${element.categoryName}</div>`.replace(detail.value, `<span style="color:#FF7C00">${detail.value}</span>`)
              });
            });
          });
        }
        this.categoryResultList = searchRes || [];
      }
    },
    // 确认选择，并跳转回前页面
    confirm({ parentId, id }) {
      uni.navigateBack({
        delta: 1,
        complete: () => {
          this.getOpenerEventChannel().emit('categroyVHTML', { parentId, id });
        }
      });
    },
    // 回退
    navigateBackPage() {
      uni.navigateBack({ delta: 1 });
    },
    switchTabPage(url) {
      uni.switchTab({ url });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
